<template>
  <div class="advanced-form">
    <Form :model="formItem" :label-width="100">
      <Card :dis-hover="true">
          <p slot="title">
              <Icon type="ios-person-outline"></Icon>
              企业基本信息
          </p>
          <a href="#" style="color:blue;" slot="extra" @click.prevent="changeLimit">
              <Icon type="ios-loop-strong"></Icon>
              刷新
          </a>
            <Row>
                <Col span="8">
                <FormItem label="组织机构代码">
                  <Input size="large" v-model="formItem.organNo" placeholder="请输入组织机构编码"></Input>
                </FormItem>
                </Col>
                <Col span="16">
                <FormItem label="组织机构名称">
                  <Input size="large" v-model="formItem.organName" placeholder="请输入组织机构名称"></Input>
                </FormItem>
                </Col>
                <Col span="8">
                <FormItem label="法定代表人">
                  <Input size="large" v-model="formItem.owners" placeholder="请输入法定代表人"></Input>
                </FormItem>
                </Col>
                <Col span="8">
                <FormItem label="单位性质">
                  <Select v-model="formItem.organNature" size="large">
                    <Option value="企业" key="1">企业</Option>
                    <Option value="事业单位" key="2">事业单位</Option>
                  </Select>
                </FormItem>
                </Col>
                <Col span="8">
                <FormItem label="行政区域代码">
                  <Select v-model="formItem.administvNo" size="large">
                    <Option value="520100" key="1">贵阳市</Option>
                  </Select>
                </FormItem>
                </Col>

                <Col span="8">
                <FormItem label="注册负责人">
                  <Input size="large" v-model="formItem.declarePersonLiable" placeholder="请输入注册负责人"></Input>
                </FormItem>
                </Col>
                <Col span="8">
                <FormItem label="行业代码">
                  <Select v-model="formItem.industryNo" size="large">
                    <Option value="电气机械和器材制造业" key="1">电气机械和器材制造业</Option>
                    <Option value="工程建设" key="2">工程建设</Option>
                  </Select>
                </FormItem>
                </Col>
                <Col span="8">
                <FormItem label="资信登记">
                  <Select v-model="formItem.inpcreditRatingut" size="large">
                    <Option value="A" key="1">A</Option>
                    <Option value="B" key="1">B</Option>
                  </Select>
                </FormItem>
                </Col>

                <Col span="8">
                <FormItem label="注册资本">
                  <Input size="large" v-model="formItem.registeredCapital" placeholder="请输入注册负责人">
                    <span slot="append">万元</span>
                  </Input>
                </FormItem>
                </Col>
                <Col span="8">
                <FormItem label="联系电话">
                  <Input size="large" v-model="formItem.telNo" placeholder="请输入行业代码"></Input>
                </FormItem>
                </Col>
                <Col span="8">
                <FormItem label="邮政编码">
                  <Input size="large" v-model="formItem.zipCode" placeholder="请输入资信等级"></Input>
                </FormItem>
                </Col>

                <Col span="8">
                <FormItem label="电子邮箱">
                  <Input size="large" v-model="formItem.eMail" placeholder="请输入电子邮箱"></Input>
                </FormItem>
                </Col>
                <Col span="16">
                <FormItem label="联系地址">
                  <Input size="large" v-model="formItem.contactAddr" placeholder="请输入联系地址"></Input>
                </FormItem>
                </Col>

                <Col span="24">
                <FormItem label="备注">
                  <Input size="large" v-model="formItem.remark" placeholder="备注"></Input>
                </FormItem>
                </Col>
            </Row>
      </Card>

      <Card :dis-hover="true">
        <Alert type="success">银行要求，请正确填写，否则将导致银行退款（如退还保证金）不成功！</Alert>
          <p slot="title">
              <Icon type="ios-person-outline"></Icon>
              银行基本账户
          </p>
          <a href="#" style="color:blue;" slot="extra" @click.prevent="changeLimit">
              <Icon type="ios-loop-strong"></Icon>
              刷新
          </a>
            <Row>
                <Col span="12">
                <FormItem label="开户银行">
                  <Input size="large" v-model="formItem.depositBank" placeholder="请输入开户银行"></Input>
                </FormItem>
                </Col>
                <Col span="12">
                <FormItem label="支行号">
                  <Input size="large" v-model="formItem.branchNo" placeholder="请输入支行号"></Input>
                </FormItem>
                </Col>
                <Col span="12">
                <FormItem label="账户名称">
                  <Input size="large" v-model="formItem.basicAccountName" placeholder="请输入账户名称"></Input>
                </FormItem>
                </Col>
                <Col span="12">
                <FormItem label="基本账户帐号">
                  <Input size="large" v-model="formItem.basicAccountNo" placeholder="请输入基本账户帐号"></Input>
                </FormItem>
                </Col>
                <Col span="24">
                <FormItem label="上传开户许可证">
                  <div :key="item.id" class="demo-upload-list" v-for="item in uploadList">
                      <template v-if="item != null">
                          <img :src="item.url">
                          <div class="demo-upload-list-cover">
                              <Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>
                              <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
                          </div>
                      </template>
                      <template v-else>
                          <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
                      </template>
                  </div>
                  <Upload
                    style="display: inline-block;width:58px;"
                    class="demo-upload-list"
                    :data="uploadParam"
                    name="uploadFile"
                    ref="accountUpload"
                    :on-success="handleSuccess"
                    action="/api/upload"
                    :format="['jpg','jpeg','png']"
                    :max-size="2048"
                    :on-format-error="handleFormatError"
                    :on-exceeded-size="handleMaxSize"
                    :before-upload="handleBeforeUpload">
                    <div style="width: 58px;height:58px;line-height: 58px;text-align:center;border:1px dashed #efefef;">
                        <Icon type="camera" size="20"></Icon>
                    </div>
                  </Upload>
                </FormItem>
                </Col>

            </Row>
      </Card>

      <Card :dis-hover="true">
        <Alert type="success">若证书为“长期”，失效日期请填写为：2099-12-31；若税务登记证无失效日期，请与营业执照失效日期保持一致！</Alert>
          <p slot="title">
              <Icon type="ios-person-outline"></Icon>
              证件信息
          </p>
          <a href="#" style="color:blue;" slot="extra" @click.prevent="changeLimit">
              <Icon type="ios-loop-strong"></Icon>
              刷新
          </a>
            <Row>
              <Col span="24">
                <FormItem label="营业执照号码">
                  <Input size="large" v-model="formItem.businessLicenseNo" placeholder="请输入营业执照号码"></Input>
                </FormItem>
              </Col>


              <Col span="12">
                <FormItem label="注册日期">
                  <DatePicker placement="top-start" type="date" :options="formItem.licRegisterDate" placeholder="请输入或者选择注册日期" style="width: 100%"></DatePicker>
                </FormItem>
              </Col>
              <Col span="12">
                <FormItem label="失效日期">
                  <DatePicker placement="top-start" type="date" :options="formItem.licExpiryDate" placeholder="请输入或者选择失效日期" style="width: 100%"></DatePicker>
                </FormItem>
              </Col>
              <Col span="12">
                <FormItem label="上传营业执照">
                  <!-- <Upload> </Upload> -->
                </FormItem>
              </Col>
            </Row>
      </Card>
    </Form>
    <FooterToolbar>
      <div slot="right">
        <Button type="default" icon="ios-more">置空</Button>
        <Button type="primary" icon="plus-round" @click="save">保存</Button>
      </div>
    </FooterToolbar>
    <Modal title="View Image" v-model="visible">
        <img :src="'https://o5wwk8baw.qnssl.com/' + imgName + '/large'" v-if="visible" style="width: 100%">
    </Modal>
  </div>
</template>

<script>
import Cookies from 'js-cookie';
import FooterToolbar from '@/components/FooterToolbar'
export default {
  data() {
    return {
      // uploadList: [
      //     {
      //         name: 'a42bdcc1178e62b4694c830f028db5c0',
      //         id: '1',
      //         url: 'https://o5wwk8baw.qnssl.com/a42bdcc1178e62b4694c830f028db5c0/avatar'
      //     },
      //     {
      //         name: 'bc7521e033abdd1e92222d733590f104',
      //         id: '2',
      //         url: 'https://o5wwk8baw.qnssl.com/bc7521e033abdd1e92222d733590f104/avatar'
      //     }
      // ],
      imgName: '',
      visible: false,
      uploadList: []
    }
  },
  beforeRouteEnter: (to, from, next) => {
    // 后端请求数据
    next(vm => {
    	vm.$store.dispatch('legal/get', '937187414306328577')
    })
  },
  computed: {
    formItem () {
      return this.$store.state.legal.data
    },
    uploadParam () {
      return {fileModule: 'tb_legal_info', token: Cookies.get('loozb_token')}
    }
  },
  components: {
    FooterToolbar
  },
  methods: {
    save () {
      this.$Modal.confirm({
          title: '操作提醒',
          content: '确定保存吗？',
          onOk: () => {
              this.$store.dispatch('legal/save', this.formItem).then((response) => {
                if(response) {
                  const {data} = response;
                  this.$store.dispatch('legal/get', data.id);
                  this.$Message.success('保存成功');
                }
              })
          },
          onCancel: () => {
              // this.$Message.info('Clicked cancel');
          }
      });
    },
    handleBeforeUpload(file) {
        // if(name.indexOf('jpg') === -1 || name.indexOf('jpeg') === -1 || name.indexOf('jpg') === -1) {
        //   this.$Message.error('上传格式不正确，上传格式只能是jpg、jpeg、jpg中的一种', 5)
        //   return false;
        // }
        // if(size >= 2097152) {
        //   //如果大于2M
        //   this.$Message.error('上传附件不能大于两M', 5)
        //   return false;
        // }
      this.$Notice.warning({
          title: '文件准备上传',
          desc: '文件 ' + name + ' 准备上传，请等待...'
      });
      return true;
    },
    handleMaxSize(file) {
      this.$Notice.warning({
          title: '文件超出限制大小',
          desc: '文件  ' + file.name + ' 太大, 不能超过 2M.'
      });
    },
    handleFormatError(file) {
      this.$Notice.warning({
          title: '文件格式错误',
          desc: '文件 ' + file.name + ' 格式错误, 请选择 jpg or png.'
      });
    },
    handleSuccess(res, file) {

    },
    handleView (name) {
        this.imgName = name;
        this.visible = true;
    },
    handleRemove (file) {
        const fileList = this.$refs.accountUpload.fileList;
        this.$refs.accountUpload.fileList.splice(fileList.indexOf(file), 1);
    },
  },
  mounted () {
    this.$Message.info('高级表单操作，含附件上传，已跟后端对接');
    this.uploadList = this.$refs.accountUpload.fileList;
  }
}
</script>


<style lang="less">
.advanced-form {
  padding-bottom:48px;
  .ivu-card-body {
    padding: 20px 100px;
  }

}

.demo-upload-list{
    display: inline-block;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0,0,0,.2);
    margin-right: 4px;
}
.demo-upload-list img{
    width: 100%;
    height: 100%;
}
.demo-upload-list-cover{
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.6);
}
.demo-upload-list:hover .demo-upload-list-cover{
    display: block;
}
.demo-upload-list-cover i{
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
}
</style>
